<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>致自己</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				
			}
			.container {
				width: 960px;
				margin: 0 auto;
			}
			.show-img {
				width: 500px;
				height: 400px;
				overflow:hidden;
				border: 1px solid #000000;
				position: relative;
			}
			.show-img img {
				position: relative;
			}
			.show-img .ico-long-pic {
				padding: 0 5px;
				position: absolute;
				background: #009999;
				color: #FFF;
				left: 0;
				top: 0;
				z-index: 9;
			}
			.up {
				width: 500px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				filter: Alpha(opacity=0);
				z-index: 99;
			} 
			.down {
				width: 500px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 200px;
				opacity: 0;
				filter: Alpha(opacity=0);
				z-index: 99;
			} 
		</style>
	</head>

	<body>
		<div class="container">
		<p>我就是想出来看看外面的世界</p>
			<div class="show-img">
				<i class="ico-long-pic">长图</i>
				<div class="up"></div>
				<div class="down"></div>
				<img id="long-pic" src="/images/article/15.jpg" alt="" />
			</div>
		</div>
	</body>
	<script>
		var img = document.getElementById('long-pic');
		
		var context = img.parentNode;
	
		
		
		context.onmouseover = function() {
			
			var e = event || window.event,
				target = e.target || e.srcElement;
				relativeX = e.clientX - context.offsetLeft,
				relativeY = e.clientY - context.offsetTop,
				targetH = -img.offsetHeight+context.offsetHeight,
				compareH =  context.offsetHeight /2;
				
				if(target.className == 'up') {
					
					startMove(img,0);
				}
				if(target.className == 'down') {
					startMove(img,targetH);
				}
			
		}
		
		context.onmouseout = function() {
			if (img.timer) {
				clearInterval(img.timer);
			}			
		}
		
		function startMove(obj, iTarget) {
			clearInterval(obj.timer);
			
			var speed = obj.offsetTop > iTarget ? -6 : 6;
			

			obj.timer = setInterval(function(){
				if (Math.abs(iTarget - obj.offsetTop) <= Math.abs(speed)) {
					clearInterval(obj.timer);
					obj.style.top = iTarget + 'px';
				} else{
					obj.style.top = obj.offsetTop + speed + 'px';
				}
			},30);
			
		}
		
		function d(msg) {
			if(console) {
				console.log(msg);
			}
		}
	</script>

</html>
